<template>
    <v-container class="case-box my-6" style="max-width: 1500px">
        <div class="hello">
            <div class="tabs">
                <div v-for="(item,index) in tabsList" :key="index" class="tabItem" @click="changeTab(index)"
                :class="[currentTab == index ? 'tabItemActive':'']"
                >
                    {{item}}
                </div>
            </div>
<!--            盲盒之塔-->
            <div v-show="currentTab == 0">
                <div class="gameContentPhone" v-if="isPhone">
                    <img src="@/static/game/towerBac.png" class="towerBacPhone"/>
                    <div class="phoneContCenter">
                        <div class="phoneCTop" @click="showChangeDiff = false">
                            <div class="noData" v-if="diffGoodsList.length == 0">
                                暂无内容!
                            </div>
                            <div class="phoneBigItem" v-for="(it,ind) in diffGoodsList" :key="ind">
                                <template  v-for="(num) in showNum" :key="num">
                                    <div v-if="!gameOver" class="phoneLitteItem" :style="{
                                    width:(100/showNum - 1) + '%'
                                }">
                                        <div  v-if="it.position == num" class="numActiveClassPhone">
                                            <div v-if="it.status == 1">
                                                <img :src="luck_positionImg" v-if="it.luck_position" class="afterImgLuck" />
                                                <img :src="processImageUrl(currentDiffImg)" class="afterImg" v-else/>
                                            </div>
                                            <img src="@/static/game/towerFail.png" class="afterImg" v-else/>
                                        </div>
                                        <div v-else>
                                            <img src="@/static/game/towerItemTwo.png" class="baseImg" v-if="showNum == 2"/>
                                            <img src="@/static/game/towerItemThree.png" class="baseImg" v-if="showNum == 3"/>
                                            <img src="@/static/game/towerItem.png" class="baseImg" v-if="showNum == 4"/>
                                        </div>
                                    </div>
                                    <div v-if="gameOver" class="phoneLitteItem" :class="[it.position == num ? 'numActiveClassPhone':'numActiveClassPhoneNo',it.arrange && it.arrange.length > 0 && it.arrange[num-1] != '1'? 'phoneLitteItemFail':'']" :style="{
                                    width:(100/showNum - 1) + '%'
                                }">
                                        <img :src="luck_positionImg"  class="afterImgLuck" v-if="it.luck_position >= 1 && it.luck_position == num"/>
                                        <img :src="processImageUrl(currentDiffImg)" v-else-if="it.arrange && it.arrange.length > 0 && it.arrange[num-1] == '1'" class="afterImg" />
                                        <img src="@/static/game/towerFail.png"  class="afterImg" v-else/>
                                    </div>
                                </template>
                                <div class="phoneChoice" v-if="ind == currentPlayingPross">
                                    <div class="phoneChTop" style="transform: scale(0.8)">
                                        <div class="gcFloor">
                                            <img src="@/static/game/choiceFloor.png" class="choiceFloor"/>
                                            <div class="gcFloorTex">第 {{ind + 1}} 层</div>
                                        </div>
                                        <div class="gctImg" v-if="it.skin_img">
                                            <img :src="it.skin_img"/>
                                            <div>x {{rateNum*currentLuck}}</div>
                                            <div class="card-background-shadow"></div>
                                        </div>
                                        <div class="gctTex" style="color: rgb(254, 211, 79)" v-if="it.skin_name">价值{{it.skin_price || ''}}T币</div>
                                        <div class="gctTex">{{it.skin_name || ''}}</div>
                                        <div class="phoneChTopNoDate" v-if="!it.skin_name">
                                            空盒子
                                        </div>
                                    </div>
                                    <div class="phoneChBot">
                                        <div class="gvChoiceBotItem" v-for="(num,numInd) in showNum" :key="num"
                                             @click="pickGame(it.id,num,ind)"
                                             :class="[currentClickPosition == num ? 'imageRotate':'']"
                                        >
                                            <div v-if="showNum == 4">
                                                <img src="@/static/game/choiceActive.png"   v-if="numInd == 0"/>
                                                <img src="@/static/game/choiceActive2.png"  v-if="numInd == 1"/>
                                                <img src="@/static/game/choiceActive3.png"  v-if="numInd == 2"/>
                                                <img src="@/static/game/choiceActive4.png"  v-if="numInd == 3"/>
                                            </div>
                                            <div v-if="showNum == 3">
                                                <img src="@/static/game/choiceActiveThree.png" class="choiceActive"  v-if="numInd == 0"/>
                                                <img src="@/static/game/choiceActiveThree2.png" class="choiceActive"  v-if="numInd == 1"/>
                                                <img src="@/static/game/choiceActiveThree3.png" class="choiceActive"  v-if="numInd == 2"/>
                                            </div >
                                            <div v-if="showNum == 2">
                                                <img src="@/static/game/choiceActiveTwo.png" class="choiceActive"  v-if="numInd == 0"/>
                                                <img src="@/static/game/choiceActiveTwo2.png" class="choiceActive"  v-if="numInd == 1"/>
                                            </div>
<!--                                            <img src="@/static/game/choiceActive.png" v-if="showNum == 4"/>-->
<!--                                            <img src="@/static/game/choiceActiveThree.png" class="choiceActive" v-if="showNum == 3"/>-->
<!--                                            <img src="@/static/game/choiceActiveTwo.png" class="choiceActive" v-if="showNum == 2"/>-->
                                        </div>
                                    </div>
                                </div>
                                <div class="phoneNoBigChoice" v-if="(it.position == -1 || !it.position) && ind != currentPlayingPross && !gameOver && it.skin_price > 0">
                                    <div class="phoneNoBigChoiceTop">
                                        <img :src="it.skin_img" style="width: 20px;height: 20px;"/>
                                        <div style="transform: scale(0.7);color: rgb(254, 211, 79)"> 价值{{it.skin_price || ''}}T币</div>
                                    </div>
                                    <div style="transform: scale(0.7);">x {{rateNum*currentLuck}}</div>
                                </div>
                            </div>
                            <div class="gcDiffcultPhone" v-if="showChangeDiff" @click.stop>
                                <div class="gcDTitle">难度选择</div>
                                <div class="gcDTip">难度越高饰品价值越高！</div>
                                <div class="gcDList">
                                    <div class="gcDItem" v-for="(difItem,difIndex) in diffList" :key="difIndex"
                                         @click.stop="changeDiff(difItem)"
                                         :class="[currentDifficultyId == difItem.id ? 'gcDItemActive':'']"
                                    >
                                        <img :src="processImageUrl(difItem.img)" alt=""/>
                                        <div class="gcDTi">
                                            {{difItem.name || ''}} {{difItem.num}}/{{difItem.total}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="phoneCBot">
                            <div class="pcbLeft" @click="toStart" :class="[currentPlayingPross == 0 ? 'gcBotActiveZero':'',currentPlayingPross > 0 ? 'gcBotActiveOne':'']">
                                <div v-if="currentPlayingPross == -1">
                                    <div v-if="gameOver" style="display: flex;align-items: center">
                                        重新开始 消耗{{(currentDiffObj.cost*rateNum).toFixed(2)}}个硬币
<!--                                        <img src="@/static/img/icon/coin.png" style="width: 15px;margin-left: 5px"/>-->
                                    </div>
                                    <div v-else style="display: flex;align-items: center">
                                        开始 消耗{{(currentDiffObj.cost*rateNum).toFixed(2)}}个硬币
<!--                                        <img src="@/static/img/icon/coin.png" style="width: 15px;margin-left: 5px"/>-->
                                    </div>
                                </div>
                                <div v-if="currentPlayingPross == 0" class="stating">
                                    领取当前饰品
                                </div>
                                <div v-if="currentPlayingPross > 0" class="winClass">
                                    领取当前饰品
                                    <div style="display: flex;align-items: center" v-if="currentWinSkin_img">
                                        <img :src="currentWinSkin_img"/>
                                        （价值{{currentWinSkin_price}}T币）x {{rateNum*currentLuck}}
                                    </div>
                                </div>
                            </div>
                            <div class="pcbRight" @click="openDiffPop">
                                <img :src="processImageUrl(currentDiffImg)" style="width: 30px;height: 30px" v-if="currentDiffImg" />
                            </div>
                        </div>
                        <div class="phoneRateWrap">
                            <div class="phoneRateWL" style="display: flex;align-items: center">
                                消耗{{(currentDiffObj.cost*rateNum).toFixed(2)}}个硬币
                                <div style="transform: scale(0.7)">( 当前倍数：{{rateNum}} )</div>
                            </div>
                            <div class="rateBtn rateBtnLeft" @click="toChangeRateNum(1)">
                                <img src="@/static/game/rateDown.png" class="rateDown"/>
                            </div>
                            <div class="rateBtn" @click="toChangeRateNum(2)">
                                <img src="@/static/game/rateUp.png" class="rateDown"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="gameContent" v-if="!isPhone">
                    <div class="gcTop" @click="showChangeDiff = false">
                        <div class="gctBigItem" v-for="(it,ind) in diffGoodsList" :key="ind">
                            <div class="gcLitteItem" v-for="(num) in showNum" :key="num">
                                <div v-if="!gameOver">
                                    <div v-if="it.position == num" class="numActiveClass">
                                        <div class="itemImg failImg" :style="{width:widthObj[showNum]}" v-if="it.status == 1">
                                           <div v-if="it.luck_position">
                                               <img :src="luck_positionImg" style="height: 60px"/>
                                           </div>
                                            <img :src="processImageUrl(currentDiffImg)" style="width: 60px;height: 60px" v-else/>
                                        </div>
                                        <div class="itemImg failImg" :style="{width:widthObj[showNum]}" v-else>
                                            <img src="@/static/game/towerFail.png" style="width: 50px;height: 50px"/>
                                        </div>
                                    </div>
                                    <div v-else>
                                        <img src="@/static/game/towerItemTwo.png" class="itemImg" :style="{width:widthObj[showNum]}" v-if="showNum == 2"/>
                                        <img src="@/static/game/towerItemThree.png" class="itemImg" :style="{width:widthObj[showNum]}" v-if="showNum == 3"/>
                                        <img src="@/static/game/towerItem.png" class="itemImg" :style="{width:widthObj[showNum]}" v-if="showNum == 4"/>
                                    </div>
                                </div>
                                <div v-if="gameOver" :class="[it.position == num ? 'numActiveClass':'numActiveClassNo']">
                                    <div class="itemImg failImg" :style="{width:widthObj[showNum]}" :class="it.position == num && it.arrange && it.arrange.length > 0 && it.arrange[num-1] != '1' ? 'failImgBac':''">
                                        <div v-if="it.luck_position >= 1 && it.luck_position == num">
                                            <img :src="luck_positionImg" style="height: 60px"/>
                                        </div>
                                        <img :src="processImageUrl(currentDiffImg)" style="width: 60px;height: 60px" v-else-if="it.arrange && it.arrange.length > 0 && it.arrange[num-1] == '1'"/>
                                        <img src="@/static/game/towerFail.png" style="width: 40px;height: 40px" v-else/>
                                    </div>
                                </div>
                            </div>
                            <div class="gctBigItemChoice" v-if="ind == currentPlayingPross">
                                <div class="gvChoiceTop">
                                    <div class="gctImg" :class="[it.skin_img ? '':'visibleHidden']">
                                        <img :src="it.skin_img"/>
                                        <div class="gvRateNum"> x {{rateNum * currentLuck}}</div>
                                        <div class="card-background-shadow"></div>
                                    </div>
                                    <div class="gctTex" style="color: rgb(254, 211, 79)" :class="[it.skin_price ? '':'visibleHidden']">价值{{it.skin_price || 0}}T币
                                        <div class="gcFloor">
                                            <img src="@/static/game/choiceFloor.png" class="choiceFloor"/>
                                            <div class="gcFloorTex">第 {{ind + 1}} 层</div>
                                        </div>
                                    </div>
                                    <div class="gctTex">{{it.skin_name || ''}}</div>
                                    <div v-if="!it.skin_price" class="gcNoGoods">空盒子</div>
                                </div>
                                <div class="gvChoiceBot">
                                    <div class="gvChoiceBotItem" v-for="(num,numInd) in showNum" :key="num"
                                         @click="pickGame(it.id,num,ind)"
                                         :class="[currentClickPosition == num ? 'imageRotate':'']"
                                    >
                                        <div v-if="showNum == 4">
                                            <img src="@/static/game/choiceActive.png" class="choiceActive" :style="{width:widthObj[showNum]}" v-if="numInd == 0"/>
                                            <img src="@/static/game/choiceActive2.png" class="choiceActive" :style="{width:widthObj[showNum]}" v-if="numInd == 1"/>
                                            <img src="@/static/game/choiceActive3.png" class="choiceActive" :style="{width:widthObj[showNum]}" v-if="numInd == 2"/>
                                            <img src="@/static/game/choiceActive4.png" class="choiceActive" :style="{width:widthObj[showNum]}" v-if="numInd == 3"/>
                                        </div>
                                        <div v-if="showNum == 3">
                                            <img src="@/static/game/choiceActiveThree.png" class="choiceActive" :style="{width:widthObj[showNum]}" v-if="numInd == 0"/>
                                            <img src="@/static/game/choiceActiveThree2.png" class="choiceActive" :style="{width:widthObj[showNum]}" v-if="numInd == 1"/>
                                            <img src="@/static/game/choiceActiveThree3.png" class="choiceActive" :style="{width:widthObj[showNum]}" v-if="numInd == 2"/>
                                        </div >
                                        <div v-if="showNum == 2">
                                            <img src="@/static/game/choiceActiveTwo.png" class="choiceActive" :style="{width:widthObj[showNum]}" v-if="numInd == 0"/>
                                            <img src="@/static/game/choiceActiveTwo2.png" class="choiceActive" :style="{width:widthObj[showNum]}" v-if="numInd == 1"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="gctBigNoChoice" v-if="(it.position == -1 || !it.position) && ind != currentPlayingPross && !gameOver && it.skin_price > 0">
                                <div class="gctBigNoChoiceLeft">
                                    <div class="card-background-shadow"></div>
                                    <img :src="it.skin_img"/>
                                    <div>价值{{it.skin_price || ''}}T币</div>
                                </div>
                                <div class="gctBigNoChoiceRight">x {{rateNum * currentLuck}}</div>
                            </div>
                        </div>
                        <div class="gcDiffcult" v-if="showChangeDiff" @click.stop>
                            <div class="gcDTitle">难度选择</div>
                            <div class="gcDTip">难度越高饰品价值越高！</div>
                            <div class="gcDList">
                                <div class="gcDItem" v-for="(difItem,difIndex) in diffList" :key="difIndex"
                                     @click.stop="changeDiff(difItem)"
                                     :class="[currentDifficultyId == difItem.id ? 'gcDItemActive':'']"
                                >
                                    <img :src="processImageUrl(difItem.img)" alt=""/>
                                    <div class="gcDTi">
                                        {{difItem.name || ''}} {{difItem.num}}/{{difItem.total}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="noData" v-if="diffGoodsList.length == 0">
                            暂无内容!
                        </div>
                    </div>
                    <div class="gcBot">
                        <div class="gcBotLeft" @click="toStart" :class="[currentPlayingPross == 0 ? 'gcBotActiveZero':'',currentPlayingPross > 0 ? 'gcBotActiveOne':'']">
                            <div v-if="currentPlayingPross == -1">
                                <div v-if="gameOver" style="display: flex;align-items: center">
                                    重新开始 消耗{{(currentDiffObj.cost*rateNum).toFixed(2)}}个硬币
<!--                                    <img src="@/static/img/icon/coin.png" style="width: 25px;margin-left: 5px"/>-->
                                </div>
                                <div v-else style="display: flex;align-items: center">
                                    开始 消耗{{(currentDiffObj.cost*rateNum).toFixed(2)}}个硬币
<!--                                    <img src="@/static/img/icon/coin.png" style="width: 25px;margin-left: 5px"/>-->
                                </div>
                            </div>
                            <div v-if="currentPlayingPross == 0">
                                领取当前饰品
                            </div>
                            <div v-if="currentPlayingPross > 0" class="winClass">
                                领取当前饰品
                                <div v-if="currentWinSkin_img" style="display: flex;align-items: center">
                                    <img :src="currentWinSkin_img"/>
                                    （价值{{currentWinSkin_price}}T币） x {{rateNum * currentLuck}}
                                </div>
                            </div>
                        </div>
                        <div class="gcBotRight" @click="openDiffPop">
                            <img :src="processImageUrl(currentDiffImg)" alt="" v-if="currentDiffImg" />
                        </div>
                    </div>
                    <div class="rateWrap">
                        <div class="rateWL">
                            消耗{{(currentDiffObj.cost*rateNum).toFixed(2)}}个硬币
                            <span style="font-size: 17px">( 当前倍数：{{rateNum}} )</span>
                        </div>
                        <div class="rateBtn rateBtnLeft" @click="toChangeRateNum(1)">
                            <img src="@/static/game/rateDown.png" class="rateDown"/>
                        </div>
                        <div class="rateBtn" @click="toChangeRateNum(2)">
                            <img src="@/static/game/rateUp.png" class="rateDown"/>
                        </div>
                    </div>
                </div>
            </div>
<!--            基诺-->
            <div v-show="currentTab == 1">
                <div class="choiceNumGame" @click="showChoiceNGameDiff = false">
                    <img src="@/static/game/choiceNumBac.png" class="choiceNumBac"/>
                    <div class="choiceNGameContent">
                       <div class="cncTop">
<!--                           numList-->
                           <div class="cnctItem" v-for="(item,index) in choiceGameRescultList" :key="index" v-if="choiceGameOver">
                               <div v-if="item.arrangeStatus">
<!--                                   选了 arrangeStatus myChoiceStatus-->
                                   <img src="@/static/game/choiceOverSuc.png" class="cnctItemImg" v-if="item.myChoiceStatus"/>
                                   <img src="@/static/game/choiceOverFali.png" class="cnctItemImg" v-else/>
                                   <div class="cncItemText" :class="[item.myChoiceStatus ? 'cncItemTextArrangeStatus':'cncItemTextArrangeStatusFail']">{{index + 1}}</div>
                               </div>
                               <div v-else>
                                   <img src="@/static/game/choiceNumPick.png" class="cnctItemImg" v-if="item.myChoiceStatus"/>
                                   <img src="@/static/game/choiceNumDeaful.png" class="cnctItemImg" v-else/>
                                   <div class="cncItemText">{{index + 1}}</div>
<!--                                   没选-->
                               </div>
                           </div>
                           <div class="cnctItem" v-for="(item) in 40" @click="choiceNumItem(item)" @mouseenter="handleMouseEnter(item)"
                                @mouseleave="handleMouseLeave"
                                v-else
                           >
                               <img src="@/static/game/choiceNumPick.png" class="cnctItemImg" v-if="numList.includes(item)"/>
                               <img src="@/static/game/choiceNumInter.png" class="cnctItemImg" v-else-if="interNum == item"/>
                               <img src="@/static/game/choiceNumDeaful.png" class="cnctItemImg" v-else/>
                               <div class="cncItemText cncItemTextChoice" v-if="numList.includes(item)">{{item}}</div>
                               <div class="cncItemText" v-else-if="interNum == item">{{item}}</div>
                               <div class="cncItemText cncItemTextDefalt" v-else>{{item}}</div>
                           </div>
                       </div>
                       <div class="cncBot">
                           <div class="cncbTop">
                               <div class="cncBtn" @click="choiceRandom(1)">随机选取</div>
                               <div class="cncBtn" @click="choiceRandom(2)">清除</div>
                           </div>
<!--                           kenoItemList-->
                           <div class="cncbMid" :class="[kenoItemList.length == 0 ? 'cncbMidNodata':'']">
                               <div class="cncbmItem" v-for="(it,ind) in kenoItemList" :key="ind" :class="[ind + 1 == winNum ? 'cncbmItemWinStatus':'']">
                                   <div class="cncbmItemTop">
                                       <div class="cncbi">{{it.win_num}}</div>
                                       <img src="@/static/game/gameStar.png" class="gameStar"/>
                                       <div class="cncbi">可领</div>
                                   </div>
                                   <div class="cncbiGoodImg" v-if="it.skin_img">
                                       <div class="card-background-shadow"></div>
                                       <img :src="it.skin_img" class="cncbiGoodskin_img"/>
                                   </div>
                                   <div class="cncbmItemPrice">
                                       <img src="@/static/img/icon/coin.png"/>
                                       <div>{{it.skin_price}}</div>
                                   </div>
                               </div>
                               <div v-if="kenoItemList.length == 0">
                                   选择10个数字
                               </div>
                           </div>
                           <div class="cncbBot">
                               <div class="cncbbLeft" @click="toKenoStart" :class="[numList.length == 0 ? 'cncbbLeftCant':'']">
                                   <div v-if="choiceGameOver">重新开始</div>
                                   <div v-else>开始 消耗{{gameConfig.cost*rateNum}}个硬币</div>
                               </div>
                               <div class="cncbbRight" @click.stop="showChoiceNGameDiff = !showChoiceNGameDiff">
                                   <img :src="processImageUrl(currentChoiceDiffImg)" class="choiceNumDifImg"/>
                               </div>
                           </div>
                           <div class="rateWrapMuChoice">
                               <div class="rateWL">
                                   消耗{{(gameConfig.cost*rateNum).toFixed(2)}}个硬币
                                   <span>( 当前倍数：{{rateNum}} )</span>
                               </div>
                               <div class="rateBtn rateBtnLeft" @click="toChangeRateNum(1)">
                                   <img src="@/static/game/rateDown.png" class="rateDown"/>
                               </div>
                               <div class="rateBtn" @click="toChangeRateNum(2)">
                                   <img src="@/static/game/rateUp.png" class="rateDown"/>
                               </div>
                           </div>
                       </div>
                    </div>
                    <div class="choiceNGameDiff" v-if="showChoiceNGameDiff" @click.stop>
                        <div class="choiceNGTitle">难度选择</div>
                        <div class="choiceNGTip">难度越高饰品价值越高！</div>
                        <div class="chocieDiffItem"
                        v-for="(it,ind) in kenoDiffList" :key="ind"
                             @click="choiceNumDiff(it)" :class="[numDiff == it.id ? 'chocieDiffActive':'']"
                        >
                            <img :src="processImageUrl(it.img)"/>
                            {{it.name}}
                        </div>
                    </div>
                </div>
            </div>
            <div v-show="currentTab == 2">
                <thunder></thunder>
            </div>
            <div class="gameRecord">
                <div class="audioBtn">
                    <div class="abtL" @click="showTip = !showTip">说明
                        <div class="hot-to-play" v-if="!isPhone">
                            <p v-if="currentTab == 0">以爬上塔的顶部获得价值最高的饰品为胜利，塔的高低取决于你选择的难度。 难度有“简单”、“普通”、“困难”、“噩梦”和“地狱”，每爬上一层塔都有相应的饰品奖励，选择难度越高可获得的饰品价值越高。
                            </p>
                            <p v-if="currentTab == 1"> 玩家从 1-40 中随意挑选1-10个数字进入。每次最多可以选择十个数字，每次猜中的数字越多，获得的饰品价值越高。
                                玩家选择想隐藏在棋盘上的地雷数量，选取方格查找宝石，找到雷区中所有不是地雷的方格，同时避免踩到地雷，成功选中所有宝石即可获取饰品，一旦踩到炸弹则结束。</p>
                        </div>
                        <div v-if="isPhone && showTip" class="hot-to-play-phone" @click.stop="showTip = !showTip">
                            <p v-if="currentTab == 0">以爬上塔的顶部获得价值最高的饰品为胜利，塔的高低取决于你选择的难度。 难度有“简单”、“普通”、“困难”、“噩梦”和“地狱”，每爬上一层塔都有相应的饰品奖励，选择难度越高可获得的饰品价值越高。
                            </p>
                            <p v-if="currentTab == 1"> 玩家从 1-40 中随意挑选1-10个数字进入。每次最多可以选择十个数字，每次猜中的数字越多，获得的饰品价值越高。
                                玩家选择想隐藏在棋盘上的地雷数量，选取方格查找宝石，找到雷区中所有不是地雷的方格，同时避免踩到地雷，成功选中所有宝石即可获取饰品，一旦踩到炸弹则结束。</p>
                        </div>
                    </div>
                    <div class="abtR" @click="isOpenSound = !isOpenSound" >
                        <div>音效</div>
                        <img v-if="!isOpenSound" src="@/static/game/voClose.png"/>
                        <img v-else src="@/static/game/voOpen.png"/>
                    </div>
                </div>
                <div class="recTabs">
                    <img src="@/static/game/tabRecLeft.png" class="recTabsImg" v-if="currentRecIndex == 0" />
                    <img src="@/static/game/tabRecRight.png" class="recTabsImg" v-else/>
                    <div class="tabCont">
                        <div class="recTabItem" @click="changeRecIndex(0)">
                            娱乐记录
                        </div>
                        <div class="recTabItem" @click="changeRecIndex(1)">
                            我的记录
                        </div>
                    </div>
                </div>
                <div class="recContent">
                    <div class="recItem" style="height: 65px">
                        <div class="time" v-if="!isPhone">
                            时间
                        </div>
                        <div class="name" v-if="currentRecIndex != 1">昵称</div>
                        <div class="titleDiff" v-if="currentTab == 0">难度</div>
                        <div class="floor" v-if="currentTab == 0">层数</div>
                        <div class="name" v-if="currentRecIndex == 1 && currentTab == 1">中/选</div>
                        <div class="name" v-if="currentRecIndex == 1">花费</div>
                        <div class="goodsName" style="justify-content: center">
                            结果
                        </div>
                    </div>
                    <div class="recItem" v-for="(item,index) in recordsList" :key="index">
                        <div class="time" v-if="!isPhone">
                            {{ $dayjs.unix(item.created_at).format("MM-DD HH:mm") }}
                        </div>
                        <div class="name" v-if="currentRecIndex != 1">{{item.nickname || ''}}</div>
                        <div class="titleDiff" v-if="currentTab == 0">{{reduceDiff(item.difficulty_id)}}</div>
                        <div class="floor" v-if="currentTab == 0">{{item.rounds || 0}}</div>
                        <div class="name" v-if="currentRecIndex == 1 && currentTab == 1">{{item.win_num}}/{{item.numbers}}</div>
                        <div class="name" v-if="currentRecIndex == 1">{{item.cost*item.multiple || ''}}</div>
                        <div class="goodsName" v-if="item.status == 1 && item.skin_price && currentTab == 0">
                            <img :src="item.skin_img" alt=""/>
                            <div>
                                <div>
                                    （价值{{item.skin_price}}T币） <span style="color: red">（x {{item.multiple * item.win_multiple || ''}}）</span>
                                </div>
                                <div> {{item.skin_name}}</div>
                            </div>
                        </div>
                        <div class="goodsName" v-if="item.status == 1 && item.skin_price && currentTab == 1">
                            <img :src="item.skin_img" alt=""/>
                            <div>
                                <div> （价值{{item.skin_price}}T币）<span style="color: red">（x {{item.multiple || ''}}）</span></div>
                                <div>    {{item.skin_name}}</div>
                            </div>
                        </div>
                        <div class="goodsName" v-if="item.status == 1 && !item.skin_price">
                           空箱子
                        </div>
                        <div class="goodsName" v-if="item.status == 2">
                           失败
                        </div>
                        <div class="goodsName" v-if="item.status == 9">
                            自动取消
                        </div>
                        <div class="goodsName" v-if="item.status == 0" style="flex-direction: column">
                            <div>进行中</div>
                            <div>金币会在当天凌晨00:15退回</div>
                            <div>或自动领取饰品</div>
                        </div>
                    </div>
                    <div v-if="recordsList.length == 0" style="text-align: center;padding-top: 40px">暂无数据</div>
                </div>
                <div class="text-center" style="margin-top: 10px">
                    <el-pagination
                            v-model:page-size="params.page_size"
                            :total="recordsTotal"
                            v-model:current-page="params.page"
                            @current-change="fetch"
                            hide-on-single-page
                            layout="prev, pager, next"
                    ></el-pagination>
                </div>
            </div>
        </div>
        <div class="fixedPop" v-if="visible" @click="visible = false">
            <div class="popup" @click.stop>
                <img :src="receiveObj.skin_img"  class="popImg"/>
                <div style="color: rgb(254, 211, 79)">{{receiveObj.skin_price ? receiveObj.skin_price + 'T币' : '空盒子'}}</div>
                <div>{{receiveObj.skin_name || ''}}</div>
                <div v-if="receiveObj.win_multiple">x {{receiveObj.multiple * receiveObj.win_multiple || ''}}</div>
                <div v-else>x {{receiveObj.multiple || ''}}</div>
                <div class="emp"></div>
                <div class="popBtn" @click.stop="visible = false">确定</div>
            </div>
        </div>
    </v-container>
</template>

<script lang="ts">
    import {computed, defineComponent, onMounted, reactive, ref, toRefs} from "vue";
    import gameSever from "@/services/game";
    import {processImageUrl} from "@/utils";
    import { ElMessage} from "element-plus";
    import thunder from "./thunder.vue";
    import {useStore} from "@/store";
    const clickAudio = new Audio("/media/click.mp3");
    const gotGiftAudio = new Audio("/media/gotGift.mp3");
    const lostAudio = new Audio("/media/lost.mp3");
    const winAudio = new Audio("/media/win.mp3");
    import luck2 from "@/static/game/luck2.png";
    import luck3 from "@/static/game/luck3.png";
    import luck4 from "@/static/game/luck4.png";
    import luck5 from "@/static/game/luck5.png";
    import luck6 from "@/static/game/luck6.png";
    import luck7 from "@/static/game/luck7.png";
    import luck8 from "@/static/game/luck8.png";
    import luck9 from "@/static/game/luck9.png";
    import luck10 from "@/static/game/luck10.png";
    export default defineComponent({
        name: "CaseBox",
        components:{
            thunder
        },
        setup() {
            const store = useStore();
            const state = reactive({
                showTip:false,
                visible:false,
                isMobile:false,
                isOpenSound:true,
                isPhone:window.screen.width < 768,
                tabsList:[
                    '盲盒之塔','基诺','扫雷','大转盘'
                ],
                currentTab:0,
                currentPlayingPross:-1,
                currentClickPosition:-1,
                currentWinSkin_img:'',
                currentWinSkin_price:'',
                showChangeDiff:false,
                gameOver:false,
                currentOrderId:'',
                gameConfig:{
                    cost:0
                },
                diffList:[],
                diffGoodsList:[],
                currentDiffImg:'',
                currentDifficultyId:'',
                showNum:4,
                widthObj:{
                    2:'335px',
                    3:'221px',
                    4:'165px'
                },
                params:{
                    page: 1,
                    page_size: 10,
                    status:1
                },
                recordsList:[],
                recordsTotal:0,
                currentRecIndex:0,
                receiveObj:{},
                userInfo:computed(() => store.getters.userInfo),
                numList:[],
                interNum:-1,
                numDiff:1,
                kenoList:[],
                kenoItemList:[],
                showChoiceNGameDiff:false,
                choiceGameOver:false,
                choiceGameRescultList:[],
                rateNum:1,
                skin_ids:[],
                currentDiffObj:{},
                luck_positionImg:'',
                currentLuck:1,
                kenoDiffList:[],
                currentChoiceDiffImg:'',
                diffSkinIds:[],
                winNum:0,
                limitMaxRateNum:1
            })
            function toChangeRateNum(num) {
                if(state.currentTab == 0){
                    if(state.currentPlayingPross >= 0){
                        return;
                    }
                    gameInit()
                }else {

                }
                if(num == 1){
                    if(state.rateNum > 1){
                        state.rateNum -= 1
                    }else {
                        ElMessage.error('最小倍数为1');
                    }
                }else {
                    if(state.rateNum < state.limitMaxRateNum){
                        state.rateNum += 1
                    }else {
                        ElMessage.error('最大倍数为' + state.limitMaxRateNum);
                    }
                }
            }
            function reduceDiff(id){
                let obj = state.diffList.find(obj => obj.id == id)
                if(obj){
                    return obj.name
                }else {
                    return ''
                }
            }
            function changeRecIndex(num) {
                state.currentRecIndex = num
                state.params.page = 1
                if(num == 1){
                    state.params.status = -1
                }else {
                    state.params.status = 1
                }
                getRecords()
            }
            function changeTab(index) {
                if(index > 1){
                    ElMessage.error('暂未开通');
                    return
                }
                state.rateNum = 1
                state.currentTab = index
                getConfigGame()
                state.params.page = 1
                getRecords()
            }
            function toPalyAudio(type) {
                if(type && state.isOpenSound){
                    type.play()
                }
            }
            function toStart() {
                if (!state.userInfo) {
                    ElMessage.error('请先登录');
                    return;
                }
                state.showChangeDiff = false
                if(state.diffGoodsList.length == 0){
                    ElMessage.error('暂无内容');
                    return;
                }
                if(state.currentPlayingPross > 0){
                    toPalyAudio(gotGiftAudio)
                    gameSever.takeOrder({
                        order_id:state.currentOrderId
                    }).then(res =>{
                        if(res.data.code == 0){
                            state.receiveObj = res.data.data
                            state.visible = true
                            gameInit()
                            state.params.page = 1
                            getRecords()
                        }
                    })
                    return
                }
                toPalyAudio(clickAudio)
                if(state.gameOver){
                    gameInit()
                }
                if(state.currentPlayingPross == 0){
                    return;
                }
                gameSever.createTowerOrder({
                    difficulty_id:state.currentDifficultyId,
                    multiple:state.rateNum,
                    skin_ids:state.skin_ids
                }).then(res =>{
                    if(res.data.code == 0){
                        state.currentPlayingPross = 0
                        state.currentOrderId = res.data.data.id
                    }
                })
            }
            function pickGame(tower_skin_id,position,diffGoodsListIndex) {
                if(state.currentClickPosition != -1){
                    return
                }
                toPalyAudio(clickAudio)
                state.currentClickPosition = position
                gameSever.pickTowerOrder({
                    order_id:state.currentOrderId,
                    tower_skin_id:tower_skin_id,
                    position:position
                }).then(res =>{
                    setTimeout(()=>{
                        state.currentClickPosition = -1
                        if(res.data.code == 0){
                            let pickObj = res.data.data
                            state.diffGoodsList[diffGoodsListIndex].skin_img = pickObj.skin_img
                            state.currentWinSkin_img = pickObj.skin_img
                            state.currentWinSkin_price = pickObj.skin_price
                            state.diffGoodsList[diffGoodsListIndex].status = pickObj.status
                            state.diffGoodsList[diffGoodsListIndex].position = pickObj.position
                            if(pickObj.status == 2){
                                state.currentPlayingPross = -1
                                state.gameOver = true
                                toPalyAudio(lostAudio)
                                gameSever.getOrderItemList({
                                    order_id:state.currentOrderId
                                }).then(result =>{
                                    let list = result.data.data.itemList
                                    if(result.data.code == 0){
                                        state.diffGoodsList.forEach((x,ind)=>{
                                            x.arrange = list[ind].arrange
                                            if(list[ind].luck_position >= 1){
                                                x.luck_position = list[ind].luck_position
                                                state.luck_positionImg = getstaticFile(list[ind].luck)
                                            }else {
                                                x.luck_position = 0
                                            }
                                        })
                                    }
                                })
                            }else {
                                if(pickObj.luck_position == 0){
                                    toPalyAudio(winAudio)
                                }
                                state.currentPlayingPross = state.currentPlayingPross + 1
                                if(pickObj.luck_position >= 1 && pickObj.position == pickObj.luck_position){
                                    state.diffGoodsList[diffGoodsListIndex].luck_position = pickObj.luck_position
                                    state.diffGoodsList[diffGoodsListIndex].position = pickObj.position
                                    toPalyAudio(gotGiftAudio)
                                    state.luck_positionImg = getstaticFile(pickObj.luck)
                                    state.currentLuck = pickObj.luck
                                }
                            }
                        }
                    },1000)
                })
            }
            const getstaticFile = (luckNum) => {
               if(luckNum == 2){
                   return luck2
               }
                if(luckNum == 3){
                    return luck3
                }
                if(luckNum == 4){
                    return luck4
                }
                if(luckNum == 5){
                    return luck5
                }
                if(luckNum == 6){
                    return luck6
                }
                if(luckNum == 7){
                    return luck7
                }
                if(luckNum == 8){
                    return luck8
                }
                if(luckNum == 9){
                    return luck9
                }
                if(luckNum == 10){
                    return luck10
                }
            }
            function openDiffPop() {
                if(state.currentPlayingPross == -1 || state.currentPlayingPross == 0){
                    state.showChangeDiff = !state.showChangeDiff
                }
            }
            function gameInit() {
                state.currentPlayingPross = -1
                state.gameOver = false
                state.currentLuck = 1
                state.diffGoodsList.forEach(x =>{
                    x.position = -1
                    x.status = 0
                    x.luck_position = 0
                })
            }
            const getRecords = async () =>{
                let methods = {}
                if(state.currentTab == 0){
                    methods = {
                        0:'getOrderAll',
                        1:'getOrderList'
                    }
                }else if(state.currentTab == 1){
                    methods = {
                        0:'getKenoOrderAll',
                        1:'getKenoOrderList'
                    }
                }
                if(!gameSever[methods[state.currentRecIndex]]){
                    return
                }
                let res = await gameSever[methods[state.currentRecIndex]](state.params)
                if(res.data.code == 0){
                    state.recordsList = res.data.data.list
                    if(state.currentTab == 1){
                        state.recordsList.forEach(x =>{
                            if(x.numbers){
                                x.numbers = x.numbers.split(',').length
                            }
                        })
                    }
                    state.recordsTotal = res.data.data.total
                }
            }
            function fetch(e) {
                state.params.page = e
                getRecords()
            }
            function choiceRandom(num) {
                kenoGameInit()
                if(num == 2){
                    state.numList = []
                    state.kenoItemList = []
                    return
                }
                let numbers = [];
                while (numbers.length < 10) {
                    let randomNumber = Math.floor(Math.random() * 40) + 1;
                    if (!numbers.includes(randomNumber)) {
                        numbers.push(randomNumber);
                    }
                }
                state.numList = numbers
                getKenoItemListMethod()
            }
            function kenoGameInit() {
                state.numList = []
                state.kenoItemList = []
                state.choiceGameOver = false
            }
            function toKenoStart() {
                toPalyAudio(clickAudio)
                if(state.choiceGameOver){
                    kenoGameInit()
                    return;
                }
                if(state.numList.length == 0){
                    ElMessage.error('请选择');
                    return
                }
                gameSever.createKeno({
                    difficulty:state.numDiff,
                    numbers:state.numList,
                    skin_ids:state.diffSkinIds,
                    multiple:state.rateNum
                }).then(res =>{
                    if(res.data.code == 0){
                        if(res.data.data.status == 1){
                            state.receiveObj = res.data.data
                            state.visible = true
                            toPalyAudio(winAudio)
                        }else {
                            state.winNum = 0
                            toPalyAudio(lostAudio)
                        }
                        let arr = []
                        let arrangeArr =  res.data.data.arrange.split(',')
                        let myChoiceArr =  res.data.data.numbers.split(',')
                        for (let i = 1; i <= 40; i++) {
                            arr.push({
                                arrangeStatus:false,
                                myChoiceStatus:false
                            })
                        }
                        arrangeArr.forEach(x =>{
                            arr[Number(x-1)].arrangeStatus = true
                        })
                        myChoiceArr.forEach(x =>{
                            arr[Number(x-1)].myChoiceStatus = true
                        })
                        state.choiceGameRescultList = arr
                        state.choiceGameOver = true
                        state.params.page = 1
                        getRecords()
                        state.winNum = res.data.data.win_num
                    }
                })
            }
            function choiceNumDiff(item) {
                state.gameConfig.cost = item.cost
                state.numDiff = item.id
                state.currentChoiceDiffImg = item.img
                state.limitMaxRateNum = item.multiple
                state.rateNum = 1
                getKenoListBig()
            }
            function choiceNumItem(num) {
                toPalyAudio(clickAudio)
                if (state.numList.includes(num)) {
                    state.numList = state.numList.filter(item => item !== num);
                } else {
                    if(state.numList.length  > 9){
                        ElMessage.error('最多只能选10个哦');
                        return
                    }
                    state.numList.push(num);
                }
                getKenoItemListMethod()
            }
            function getKenoItemListMethod() {
                let kenoNum = state.numList.length
                const result = state.kenoList.find(item => item.num == kenoNum);
                if(result){
                    gameSever.getKenoItemList({
                        keno_id:result.id
                    }).then(res =>{
                        if(res.data.code == 0){
                            let arr = []
                            state.kenoItemList = res.data.data
                            state.kenoItemList.forEach(x =>{
                                arr.push(x.skin_id)
                            })
                            state.diffSkinIds = arr
                            state.winNum = 0
                        }
                    })
                }else {
                    state.kenoItemList = []
                }
            }
            function getKenoListBig() {
                gameSever.getKenoList({
                    difficulty:state.numDiff
                }).then(res =>{
                    if(res.data.code == 0){
                        state.kenoList = res.data.data
                        state.showChoiceNGameDiff = false
                        getKenoItemListMethod()
                    }
                })
            }
            function handleMouseEnter(num) {
                state.interNum = num
            }
            function handleMouseLeave() {
                state.interNum = -1
            }
            const getConfigGame = async ()=> {
                if(state.currentTab == 0){
                    let settingRes = await gameSever.settingTower()
                    if(settingRes.data.code == 0){
                        state.gameConfig = settingRes.data.data
                    }
                }else if(state.currentTab == 1){
                    getKenoDiffList('init')
                }
            }
            function getKenoDiffList(type) {
                gameSever.getKenoDifficultyList().then(res =>{
                    if(res.data.code == 0){
                        state.kenoDiffList = res.data.data
                        if(type == 'init'){
                            if(state.kenoDiffList.length > 0){
                                state.gameConfig.cost = state.kenoDiffList[0].cost
                                state.numDiff = state.kenoDiffList[0].id
                                state.currentChoiceDiffImg = state.kenoDiffList[0].img
                                state.limitMaxRateNum = state.kenoDiffList[0].multiple
                                state.rateNum = 1
                                getKenoListBig()
                            }
                        }
                    }
                })
            }
            function changeDiff(item) {
                state.showNum = item.total
                state.currentDiffImg = item.img
                state.currentDifficultyId = item.id
                state.currentDiffObj = item
                state.limitMaxRateNum = item.multiple
                state.rateNum = 1
                getSkinListMetho('changeItem')
            }
            function getSkinListMetho(type){
                gameSever.getSkinList({
                    difficulty_id:state.currentDifficultyId
                }).then(res =>{
                    if(res.data.code == 0){
                        let arr = []
                        state.diffGoodsList = res.data.data
                        res.data.data.forEach(x =>{
                            arr.push(x.skin_id)
                        })
                        state.skin_ids = arr
                        if(type == 'changeItem'){
                            state.showChangeDiff = false
                            gameInit()
                        }
                    }
                })
            }

            onMounted(async () => {
                getConfigGame()
                let diffRes = await gameSever.getDifficultyList()
                if(diffRes.data.code == 0){
                    state.diffList = diffRes.data.data
                    if(state.diffList.length > 0){
                        state.currentDiffObj = state.diffList[0]
                    }
                    if(state.diffList.length > 0){
                        state.currentDiffImg = state.diffList[0].img
                        state.showNum =state.diffList[0].total
                        state.currentDifficultyId = state.diffList[0].id
                        state.limitMaxRateNum = state.diffList[0].multiple
                        state.rateNum = 1
                        getSkinListMetho('init')
                    }
                }
                getRecords()
                getKenoListBig()
            });
            return {
                ...toRefs(state),
                processImageUrl,
                changeDiff,
                toStart,
                pickGame,
                openDiffPop,
                changeTab,
                getRecords,
                fetch,
                changeRecIndex,
                toKenoStart,
                choiceNumItem,
                handleMouseEnter,
                handleMouseLeave,
                choiceNumDiff,
                choiceRandom,
                toChangeRateNum,
                reduceDiff
            };
        },
    });
</script>

<style lang="scss" scoped>
    @font-face {
        font-family: 'gameNumTTF';
        src: url('@/static/game/gameNum.ttf') format('truetype');
    }
    .fixedPop{
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        .popup{
            width: 30%;
            height: 30vh;
            background-image: url(@/static/game/gamePop.png)!important;
            background-size: 100% 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            position: relative;
            img{
                width: 25%;
            }
            .emp{
                height: 20%;
            }
            .popBtn{
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 18%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 20px;
            }
        }
    }
    .hello{
        display: flex;
        justify-content: center;
        cursor: pointer;
        margin-top: 40px;
        margin-bottom: 40px;
        transform: scale(1);
        .tabs{
            width: 172px;
            margin-top: 10px;
            flex-shrink: 0;
            .tabItem{
                width: 100%;
                height: 70px;
                background-image: url(@/static/game/gameTab.png)!important;
                background-size: 100% auto;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 20px;
                margin-bottom: 10px;
                opacity: 0.7;
            }
            .tabItemActive{
                background-image: url(@/static/game/gameTabActive.png)!important;
                font-weight: bold;
                opacity: 1;
            }
        }
        .gameContent{
            width: 776px;
            min-height: 1182px;
            background-image: url(@/static/game/towerBac.png)!important;
            background-size: 100% auto;
            padding: 50px 47px;
            display: flex;
            flex-direction: column;
            .gcTop{
                flex: 1;
                display: flex;
                flex-direction: column-reverse;
                position: relative;
                .noData{
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 18px;
                }
                .gcDiffcult{
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    width: 400px;
                    min-height: 400px;
                    background-color: #41368A;
                    border-radius: 16px;
                    z-index: 100;
                    box-sizing: border-box;
                    padding: 40px 37px;
                    .gcDTitle{
                        color: #C6BEEC;
                        font-size: 20px;
                        font-weight: bold;
                        margin-bottom: 5px;
                    }
                    .gcDTip{
                        color: #8675D7;
                        font-size: 14px;
                        margin-bottom: 20px;
                    }

                    .gcDList {
                        display: flex;
                        flex-direction: column-reverse;
                        .gcDItem {
                            width: 325px;
                            height: 64px;
                            background-image: url(@/static/game/gcDItemDefalut.png) !important;
                            background-size: 100% 100%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            margin-top: 15px;

                            img {
                                width: 30px;
                                height: 30px;
                            }

                            .gcDTi {
                                color: #BAB0E9;
                                font-size: 14px;
                                margin-left: 30px;
                            }
                        }
                        .gcDItemHover {
                            background-image: url(@/static/game/gcDItemHover.png) !important;
                        }
                        .gcDItemActive {
                            background-image: url(@/static/game/diffChoice.png) !important;
                        }
                    }
                }
                .gctBigItem{
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    margin-top: 10px;
                    position: relative;
                    .gcLitteItem{
                        .itemImg{
                            width: 165px;
                            height: 80px;
                        }
                        .goodsImg{
                            object-fit: cover;
                        }
                        .failImg{
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            border: 1px solid #41368A;
                            border-radius: 4px;
                        }
                        .failImgBac{
                            background-color: #443F64;
                        }
                    }
                    .gctBigNoChoice{
                        position: absolute;
                        bottom: 0;
                        right: 50%;
                        transform: translate(50%,0);
                        width: 186px;
                        height: 63px;
                        background-image: url(@/static/game/noChoice.png)!important;
                        background-size: 100% 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: rgb(254, 211, 79);
                        .gctBigNoChoiceLeft{
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;
                            img{
                                width: 50px;
                                height: 50px;
                            }
                        }
                        .gctBigNoChoiceRight{
                           margin-left: 10px;
                            font-size: 16px;
                        }
                    }
                    .gctBigItemChoice{
                        position: absolute;
                        right: 0;
                        bottom: 0;
                        left: 0;
                        height: 170px;
                        background-image: url(@/static/game/towerChoice.png)!important;
                        background-size: 100% 100%;
                        z-index: 99;
                        .gvChoiceTop {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;
                            position: relative;
                            .gcNoGoods{
                                position: absolute;
                                top: 50%;
                                left: 50%;
                                transform: translate(-50%,-50%);
                            }
                            .gctImg {
                                position: relative;
                                display: flex;
                                align-items: center;
                                img{
                                    width: 50px;
                                    height: 50px;
                                }
                                .gvRateNum{
                                    margin-left: 10px;
                                }
                            }
                            .gctTex {
                                font-size: 10px;
                                text-align: center;
                                width: 100%;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                position: relative;
                                .gcFloor{
                                    position: absolute;
                                    top: -10px;
                                    left: 0;
                                    .choiceFloor{
                                        width: 95px;
                                        height: 35px;
                                    }
                                    .gcFloorTex{
                                        position: absolute;
                                        inset: 0;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        color: #E3D8FF;
                                    }
                                }
                            }
                        }
                        .visibleHidden{
                            visibility: hidden;
                        }
                        .gvChoiceBot{
                            display: flex;
                            justify-content: space-around;
                             .gvChoiceBotItem{
                                 .choiceActive{
                                     width: 160px;
                                     height: 80px;
                                 }
                                 .choiceActive:hover {
                                     opacity: 0.5; /* 鼠标移入时透明度变为1 */
                                 }
                             }
                        }
                    }
                    .numActiveClass{
                        border-radius: 2px;
                        opacity: 1;
                    }
                    .numActiveClassNo{
                        opacity: 0.3;
                    }
                }
            }
            .gcBot{
                height: 110px;
                width: 100%;
                display: flex;
                align-items: center;
                .gcBotLeft{
                    background-color:#874AFF;
                    width: 600px;
                    height: 70px;
                    border-radius: 6px;
                    margin-right: 12px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #ffffff;
                    font-size: 20px;
                    font-weight: bold;
                    .winClass{
                        display: flex;
                        align-items: center;
                        img{
                            width: 50px;
                            height: 50px;
                            margin-left: 20px;
                        }
                    }
                }
                .gcBotRight{
                    width: 70px;
                    height: 70px;
                    background-color: #3F339E;
                    border-radius: 6px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    img{
                        width: 45px;
                        height: 45px;
                    }
                }
                .gcBotActiveZero{
                    background-color: #6656B9;
                }
                .gcBotActiveOne{
                    background-color: #6C3BCE;
                }
            }
            .rateWrap{
                height: 70px;
                background-color: #100C40;
                border-radius: 6px;
                display: flex;
                align-items: center;
                .rateWL{
                    flex: 1;
                    color: #FDCF41;
                    font-size: 20px;
                    font-weight: bold;
                    padding-left: 27px;
                }
                .rateBtn{
                    width: 70px;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    .rateDown{
                        width: 24px;
                    }
                }
                .rateBtnLeft{
                    border-left: 1px solid #24245A;
                    border-right: 1px solid #24245A;
                }
            }
        }
        .gameRecord{
            margin-top: 10px;
            margin-left: 30px;
            position: relative;
            .audioBtn{
                position: absolute;
                top: 15px;
                right: 0;
                display: flex;
                align-items: center;
                color: #FFFFFF;
                .abtL{
                    margin-right: 30px;
                    position: relative;
                    .hot-to-play {
                        position: absolute;
                        text-align: left;
                        width: 350px;
                        left: 0;
                        bottom: 0;
                        transform: translate(-100%, 100%);
                        background: #363638;
                        padding: 20px;
                        box-sizing: border-box;
                        display: none;
                        p {
                            margin-bottom: 10px;

                            &:last-child {
                                margin-bottom: 0;
                            }
                        }
                    }
                    &:hover {
                        .hot-to-play {
                            display: block;
                        }
                    }
                    .hot-to-play-phone{
                        position: absolute;
                        text-align: left;
                        left: 0;
                        bottom: 0;
                        width: 200px;
                        transform: translate(-100%, 100%);
                        background: #363638;
                        padding: 10px;
                        box-sizing: border-box;
                    }
                }
                .abtR{
                    display: flex;
                    align-items: center;
                    img{
                        height: 16px;
                        width: 16px;
                        margin-left: 5px;
                        flex-shrink: 0;
                    }
                }
            }
            .recTabs{
               position: relative;
                width: 360px;
                .recTabsImg{
                    width: 100%;
                    opacity: 0.5;
                }
                .tabCont{
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    display: flex;
                    .recTabItem{
                        width: 180px;
                        height: 67px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                }
            }
            .recTabsRight{
                background-image: url(@/static/game/tabRecRight.png)!important;
            }
            .recContent{
                width: 776px;
                min-height: 975px;
                color: #ADC2FF;
                .recItem{
                    height: 85px;
                    display: flex;
                    align-items: center;
                    padding: 0 40px;
                    white-space: nowrap;
                    background-color: rgba(56,37,105,0.7);
                    .time{
                        flex: 2;
                        text-align: center;
                    }
                    .name{
                        flex: 2;
                        text-align: center;
                        flex-shrink: 0;
                    }
                    .titleDiff{
                        flex: 1;
                        text-align: center;
                    }
                    .floor{
                        flex: 1;
                        text-align: center;
                    }
                    .goodsName{
                        flex: 8;
                        display: flex;
                        align-items: center;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        img {
                            width: 70px;
                            height: 70px;
                        }
                    }
                }
                .recItem:nth-child(even){
                    background: rgba(82,55,162,0.7);
                }
            }
        }
        .choiceNumGame{
            position: relative;
            .choiceNumBac{
                height: 75vh;
            }
            .choiceNGameDiff{
                position: absolute;
                bottom: 12%;
                right: 5%;
                background-color: #41368A;
                padding: 3%;
                border-radius: 6px;
                width: 45%;
                min-height: 45%;
                z-index: 10;
                .choiceNGTitle{
                    font-size: 20px;
                    color: #C6BEEC;
                }
                .choiceNGTip{
                    font-size: 14px;
                    color: #8675D7;
                }
                .chocieDiffItem{
                    width: 100%;
                    height: 70px;
                    margin-top: 5%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #917FEF;
                    background-image: url(@/static/game/gcDItemDefalut.png) !important;
                    background-size: 100% 100%;
                    border-radius: 6px;
                    img{
                        height: 60%;
                        margin-right: 20px;
                    }
                }
                .chocieDiffItem:hover {
                    /*background-image: url(@/static/game/gcDItemHover.png) !important;*/
                }
                .chocieDiffActive {
                    background-image: url(@/static/game/diffChoice.png) !important;
                }
            }
            .choiceNGameContent{
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                padding: 7% 5% 5% 4%;
                display: flex;
                flex-direction: column;
                .cncTop{
                    width: 100%;
                    box-sizing: border-box;
                    display: flex;
                    flex-wrap: wrap;
                    align-content: baseline;
                    justify-content: space-around;
                    .cnctItem{
                        width:17%;
                        margin-bottom: 1%;
                        position: relative;
                        .cnctItemImg{
                            width:100%;
                        }
                        .choiceNumDeaful{

                        }
                        .cncItemText{
                            position: absolute;
                            top: 0;
                            right: 0;
                            bottom: 0;
                            left: 0;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: 20px;
                            font-family: 'gameNumTTF';
                            color: #A884FF;
                        }
                        .cncItemTextChoice{
                            text-shadow: 2px 2px 10px #31167c;
                        }
                        .cncItemTextDefalt{
                            opacity: 0.3;
                        }
                        .cncItemTextArrangeStatus{
                            font-size: 16px;
                            color: #ffffff;
                        }
                        .cncItemTextArrangeStatusFail{
                            font-size: 16px;
                            color:#3C0735;
                        }
                    }
                }
                .cncBot{
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    .cncbTop{
                        display: flex;
                        justify-content: space-between;
                        height: 15%;
                        .cncBtn{
                            width: 49%;
                            height: 100%;
                            border-radius: 6px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            background-color: #6656B9;
                            color: #C6BEEC;
                        }
                    }
                    .cncbMid{
                        flex: 1;
                        margin-top: 1%;
                        background-color: #100C40;
                        display: flex;
                        flex-wrap: wrap;
                        .cncbmItem{
                            width: 19%;
                            height: 49%;
                            margin-right: 1%;
                            border: 1px solid #24245A;
                            border-radius: 6px;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;
                            overflow: hidden;
                            .cncbmItemTop{
                                display: flex;
                                align-items: center;
                                .cncbi{
                                    white-space: nowrap;
                                    font-size: 14px;
                                    color: #D498FC;
                                }
                                .gameStar{
                                    width: 15px;
                                    height: 15px;
                                }
                            }
                            .cncbmItemPrice{
                                display: flex;
                                font-size: 12px;
                                color: rgb(254, 211, 79);
                                img{
                                    width: 12px;
                                    height: 12px;
                                    margin-right: 5px;
                                }
                            }
                            .cncbiGoodImg{
                                position: relative;
                                z-index: 2;
                                img{
                                   width: 50px;
                                   height: 50px;
                                }
                            }
                        }
                        .cncbmItemWinStatus{
                            border: 2px solid #874AFF;
                        }
                    }
                    .cncbMidNodata{
                        align-items: center;
                        justify-content: center;
                        color: #352C8F;
                        font-size: 24px;
                    }
                    .cncbMidTex{
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: #352C8F;
                        font-size: 24px;
                    }
                    .cncbBot{
                        margin-top: 1%;
                        height: 16%;
                        display: flex;
                        justify-content: space-between;
                        .cncbbLeft{
                            width: 88%;
                            border-radius: 6px;
                            background-color: #874AFF;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            color: #ffffff;
                            font-size: 20px;
                            font-weight: bold;
                            .coin{
                                width: 20px;
                                margin-left: 5px;
                            }
                        }
                        .cncbbLeftCant{
                            background-color: #6656B9;
                            color: #C6BEEC;
                        }
                        .cncbbRight{
                            width: 10%;
                            border-radius: 6px;
                            background-color: #6656B9;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            .choiceNumDifImg{
                                width: 50%;
                            }
                        }
                    }
                    .rateWrapMuChoice{
                        height: 15%;
                        margin-top: 1%;
                        background-color: #100C40;
                        border-radius: 6px;
                        display: flex;
                        align-items: center;
                        font-size: 20px;
                        .rateWL{
                            flex: 1;
                            color: #FDCF41;
                            font-weight: bold;
                            padding-left: 15px;
                        }
                        .rateBtn{
                            width: 70px;
                            height: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            .rateDown{
                                width: 24px;
                            }
                        }
                        .rateBtnLeft{
                            border-left: 1px solid #24245A;
                            border-right: 1px solid #24245A;
                        }
                    }
                }
            }
        }
    }
    @keyframes rotate {
        0% {
            transform: rotateY(0deg);
        }
        100% {
            transform: rotateY(180deg);
        }
    }
    .imageRotate {
        animation: rotate 0.5s infinite;
    }
    .card-background-shadow{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 0px;
        height: 0px;
        border-radius: 50%;
        z-index: -1;
        box-shadow: #5F31D5 0px 0px 20px 20px;
    }
    @media screen and (max-width: 1766px){
        .hello{
            transform: scale(0.9) translate(0,-60px);
            margin-top: 0;
            margin-bottom: 0;
            .choiceNumGame{
                .choiceNumBac{
                    height: 92vh;
                }
            }
        }
    }
    @media screen and (max-width: 768px) {
        .fixedPop{
            .popup{
                width: 80%;
            }
        }
       .hello{
           display: flex;
           flex-direction: column;
           margin-top: 0;
           margin-bottom: 0;
           transform: scale(1);
           .tabs{
               display: flex;
               width: 90%;
              .tabItem{
                  font-size: 10px;
                  height: 40px;
                  margin-right: 5px;
              }
           }
           .gameContentPhone {
               position: relative;
               .towerBacPhone {
                   width: 100%;
               }
               .phoneContCenter {
                   position: absolute;
                   top: 0;
                   right: 0;
                   left: 0;
                   bottom: 0;
                   box-sizing: border-box;
                   margin: 7% 4% 5%;
                   flex: 1;
                   display: flex;
                   flex-direction: column;
                   .phoneCTop{
                       flex: 1;
                       display: flex;
                       flex-direction: column-reverse;
                       .noData{
                           position: absolute;
                           top: 0;
                           right: 0;
                           bottom: 50%;
                           left: 0;
                           display: flex;
                           align-items: center;
                           justify-content: center;
                           font-size: 10px;
                       }
                       .phoneBigItem{
                           display: flex;
                           position: relative;
                           width: 100%;
                           height: 10%;
                           justify-content: space-between;
                           margin-top: 5px;
                           .phoneLitteItem{
                               width: 24%;
                               height: 100%;
                               display: flex;
                               align-items: center;
                               justify-content: center;
                               .afterImg{
                                   width: 30px;
                                   height: 30px;
                               }
                               .afterImgLuck{
                                   height: 30px;
                               }
                               .baseImg{
                                   width: 100%;
                                   height: 100%;
                               }
                           }
                           .numActiveClassPhone{
                               border:1px solid #816EFF;
                               border-radius: 2px;
                               width: 100%;
                               height: 100%;
                               display: flex;
                               align-items: center;
                               justify-content: center;
                           }
                           .numActiveClassPhoneNo{
                               opacity: 0.3;
                           }
                           .phoneLitteItemFail{
                               background-color: #443F64;
                               border:1px solid #443F64;
                           }
                           .phoneChoice{
                               position: absolute;
                               right: 0;
                               bottom: 0;
                               left: 0;
                               height: 250%;
                               background-image: url(@/static/game/towerChoicePhone.png)!important;
                               background-size: 100% 100%;
                               z-index: 99;
                               .phoneChTop{
                                   display: flex;
                                   flex-direction: column;
                                   align-items: center;
                                   justify-content: center;
                                   min-height: 60px;
                                   position: relative;
                                   .gcFloor{
                                       position: absolute;
                                       top: -5px;
                                       left: 65px;
                                       .choiceFloor{
                                           width: 65px;
                                           height: 25px;
                                       }
                                       .gcFloorTex{
                                           position: absolute;
                                           inset: 0;
                                           display: flex;
                                           align-items: center;
                                           justify-content: center;
                                           color: #E3D8FF;
                                       }
                                   }
                                   .phoneChTopNoDate{
                                       position: absolute;
                                       top: 50%;
                                       left: 50%;
                                       transform: translate(-50%,-50%);
                                   }
                                   .gctImg {
                                       position: relative;
                                       display: flex;
                                       align-items: center;
                                       img{
                                           width: 30px;
                                           height: 30px;
                                       }
                                   }
                                   .gctTex {
                                       font-size: 9px;
                                       text-align: center;
                                       white-space: nowrap;
                                       text-overflow: ellipsis;
                                       width: 60%;
                                       overflow: hidden;
                                   }
                               }
                               .phoneChBot{
                                   display: flex;
                                   justify-content: space-between;
                                   .gvChoiceBotItem{
                                       img{
                                          width: 100%;
                                       }
                                   }
                               }
                           }
                           .phoneNoBigChoice{
                               position: absolute;
                               bottom: 0;
                               left: 50%;
                               transform: translate(-50%,0);
                               height: 35px;
                               width: 25%;
                               overflow: hidden;
                               white-space: nowrap;
                               background-image: url(@/static/game/noChoice.png)!important;
                               background-size: 100% 100%;
                               display: flex;
                               align-items: center;
                               justify-content: center;
                               .phoneNoBigChoiceTop{
                                   display: flex;
                                   flex-direction: column;
                                   align-items: center;
                                   justify-content: center;
                               }
                           }
                       }
                       .gcDiffcultPhone{
                           position: absolute;
                           bottom: 10%;
                           right: 0;
                           width: 80%;
                           min-height: 50%;
                           background-color: #41368A;
                           border-radius: 16px;
                           z-index: 100;
                           box-sizing: border-box;
                           padding: 20px 17px;
                           .gcDTitle{
                               color: #C6BEEC;
                               font-size: 16px;
                               font-weight: bold;
                               margin-bottom: 5px;
                           }
                           .gcDTip{
                               color: #8675D7;
                               font-size: 14px;
                               margin-bottom: 10px;
                           }
                           .gcDList{
                               display: flex;
                               flex-direction: column-reverse;
                               .gcDItem{
                                   width: 100%;
                                   height: 50px;
                                   background-image: url(@/static/game/gcDItemDefalut.png)!important;
                                   background-size: 100% 100%;
                                   display: flex;
                                   align-items: center;
                                   justify-content: center;
                                   margin-top: 5px;
                                   img{
                                       width: 20px;
                                       height: 20px;
                                   }
                                   .gcDTi{
                                       color: #BAB0E9;
                                       font-size: 14px;
                                       margin-left: 15px;
                                   }
                               }
                               .gcDItemHover {
                                   background-image: url(@/static/game/gcDItemHover.png) !important;
                               }
                               .gcDItemActive {
                                   background-image: url(@/static/game/diffChoice.png) !important;
                               }
                           }
                       }
                   }
                   .phoneCBot{
                       height:9%;
                       display: flex;
                       align-items: center;
                       margin-top: 5px;
                       .pcbLeft{
                           flex: 1;
                           height: 80%;
                           display: flex;
                           align-items: center;
                           justify-content: center;
                           border-radius: 3px;
                           margin-left: 3px;
                           background-color:#874AFF;
                           .winClass{
                               display: flex;
                               align-items: center;
                               img{
                                   width: 30px;
                                   height: 30px;
                                   margin-left: 20px;
                               }
                           }
                       }
                       .pcbRight{
                           padding: 0 10px;
                       }
                       .gcBotActiveZero{
                           background-color: #6656B9;
                       }
                       .gcBotActiveOne{
                           background-color: #6C3BCE;
                       }
                   }
                   .phoneRateWrap{
                       height: 8%;
                       background-color: #100C40;
                       border-radius: 6px;
                       display: flex;
                       align-items: center;
                       margin: 0 3px;
                       .phoneRateWL{
                           flex: 1;
                           color: #FDCF41;
                           font-size: 14px;
                           font-weight: bold;
                           padding-left: 15px;
                       }
                       .rateBtn{
                           width: 50px;
                           height: 100%;
                           display: flex;
                           align-items: center;
                           justify-content: center;
                           .rateDown{
                               width: 14px;
                           }
                       }
                       .rateBtnLeft{
                           border-left: 1px solid #24245A;
                           border-right: 1px solid #24245A;
                       }
                   }
               }
           }
           .gameRecord{
               margin-left: 0;
               .audioBtn{
                  .abtL{
                      margin-right: 10px;
                  }
                   .abtR{
                       img{

                       }
                   }

               }
               .recTabs{
                   width: 60%;
                   .recTabsImg{
                       height: 40px;
                   }
                   .tabCont{
                       .recTabItem{
                           height: 100%;
                           width: 100%;
                       }
                   }
               }
               .recContent{
                   width: 100%;
                   min-height:0;
                   .recItem{
                       padding: 0 10px;
                   }
               }
           }
           .choiceNumGame{
               .choiceNumBac{
                   height: auto;
                   width: 95vw;
               }
               .choiceNGameContent{
                   .cncTop{
                       .cnctItem{
                           .cncItemText{
                               font-size: 10px;
                           }
                       }
                   }
                   .cncbMid{
                       .cncbmItem{
                           .cncbmItemTop{
                               .cncbi{
                                  transform: scale(0.7);
                               }
                               .gameStar{
                                   width: 10px!important;
                                   height: 10px!important;
                               }
                           }
                           .cncbmItemPrice{
                               font-size: 6px!important;
                               transform: scale(0.7);
                               img{
                                   width: 10px!important;
                                   height: 10px!important;
                                   margin-right: 5px;
                               }
                           }
                           .cncbiGoodImg{
                               .card-background-shadow{
                                   box-shadow: #5F31D5 0px 0px 10px 10px;
                               }
                               .cncbiGoodskin_img{
                                   width: 20px!important;
                                   height: 20px!important;
                               }
                           }
                       }
                   }
                   .cncbBot{
                       .cncbbLeft{
                           font-size: 14px!important;
                           .coin{
                               width: 13px;
                               height: 13px;
                               margin-left: 5px;
                           }
                       }
                   }
                   .rateWrapMuChoice{
                       .rateWL{
                           font-size: 12px;
                       }
                       .rateBtn{
                           width: 50px!important;
                           height: 100%;
                           display: flex;
                           align-items: center;
                           justify-content: center;
                           .rateDown{
                               width: 15px!important;
                           }
                       }
                   }
               }
           }

       }
    }
    img{
        display: block;
    }
</style>
